<template>
  <a-modal :title="shared ? $t('add_to_shared_album') : $t('add_to_album')" :visible="true" @cancel="onClose">
    <div class="mb-2 flex max-h-[400px] flex-col">
      <div v-if="loading" class="animate-pulse">
        <div v-for="n in 3" :key="n" class="flex gap-4 px-6 py-2">
          <div class="h-12 w-12 rounded-xl bg-slate-200"></div>
          <div class="flex flex-col items-start justify-center gap-2">
            <span class="h-4 w-36 animate-pulse bg-slate-200"></span>
            <div class="flex animate-pulse gap-1">
              <span class="h-3 w-8 bg-slate-200"></span>
              <span class="h-3 w-20 bg-slate-200"></span>
            </div>
          </div>
        </div>
      </div>
      <div v-else>
        <a-input
          class="border-b-4 border-immich-bg bg-immich-bg px-6 py-2 text-2xl focus:border-immich-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:focus:border-immich-dark-primary"
          :placeholder="$t('search')"
          @keydown="onkeydown"
          v-model="search"
          ref="inputRef"
        />
        <div class="immich-scrollbar overflow-y-auto">
          <div v-for="(row, index) in albumModalRows" :key="index">
            <new-album-list-item
              v-if="row.type === AlbumModalRowType.NEW_ALBUM"
              :selected="row.selected || false"
              :onNewAlbum="onNewAlbum"
              :searchQuery="search"
            />
            <p v-else-if="row.type === AlbumModalRowType.SECTION" class="px-5 py-3 text-xs">{{ row.text }}</p>
            <p v-else-if="row.type === AlbumModalRowType.MESSAGE" class="px-5 py-1 text-sm">{{ row.text }}</p>
            <album-list-item
              v-else-if="row.type === AlbumModalRowType.ALBUM_ITEM && row.album"
              :album="row.album"
              :selected="row.selected || false"
              :searchQuery="search"
              @album-click="handleAlbumClick(row.album)"
            />
          </div>
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script>
import { getAllAlbums } from '@immich/sdk';
import { mapState } from 'vuex';
import { defineComponent } from 'vue';
import { useI18n } from 'vue-i18n';
import AlbumListItem from '../../asset-viewer/album-list-item.vue';
import NewAlbumListItem from './new-album-list-item.vue';
import { AlbumModalRowConverter, AlbumModalRowType, isSelectableRowType } from './album-selection-utils';

export default defineComponent({
  components: {
    AlbumListItem,
    NewAlbumListItem,
  },
  props: {
    onNewAlbum: {
      type: Function,
      required: true,
    },
    onAlbumClick: {
      type: Function,
      required: true,
    },
    shared: {
      type: Boolean,
      required: true,
    },
    onClose: {
      type: Function,
      required: true,
    },
  },
  data() {
    return {
      albums: [],
      recentAlbums: [],
      loading: true,
      search: '',
      selectedRowIndex: -1,
      rowConverter: new AlbumModalRowConverter(this.shared, this.albumViewSettings.sortBy, this.albumViewSettings.sortOrder),
      albumModalRows: [],
      selectableRowCount: 0,
    };
  },
  computed: {
    ...mapState(['albumViewSettings']),
    t() {
      return useI18n().t;
    },
  },
  async mounted() {
    this.albums = await getAllAlbums({ shared: this.shared || undefined });
    this.recentAlbums = this.albums.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt)).slice(0, 3);
    this.loading = false;
    this.updateAlbumModalRows();
  },
  watch: {
    search: 'updateAlbumModalRows',
    recentAlbums: 'updateAlbumModalRows',
    albums: 'updateAlbumModalRows',
    selectedRowIndex: 'updateAlbumModalRows',
  },
  methods: {
    updateAlbumModalRows() {
      this.albumModalRows = this.rowConverter.toModalRows(this.search, this.recentAlbums, this.albums, this.selectedRowIndex);
      this.selectableRowCount = this.albumModalRows.filter((row) => isSelectableRowType(row.type)).length;
    },
    onkeydown(e) {
      switch (e.key) {
        case 'ArrowUp': {
          e.preventDefault();
          if (this.selectedRowIndex > 0) {
            this.selectedRowIndex--;
          } else {
            this.selectedRowIndex = this.selectableRowCount - 1;
          }
          break;
        }
        case 'ArrowDown': {
          e.preventDefault();
          if (this.selectedRowIndex < this.selectableRowCount - 1) {
            this.selectedRowIndex++;
          } else {
            this.selectedRowIndex = 0;
          }
          break;
        }
        case 'Enter': {
          e.preventDefault();
          const selectedRow = this.albumModalRows.find((row) => row.selected);
          if (selectedRow) {
            if (selectedRow.type === AlbumModalRowType.NEW_ALBUM) {
              this.onNewAlbum(this.search);
            } else if (selectedRow.type === AlbumModalRowType.ALBUM_ITEM && selectedRow.album) {
              this.onAlbumClick(selectedRow.album);
            }
            this.selectedRowIndex = -1;
          }
          break;
        }
        default: {
          this.selectedRowIndex = -1;
        }
      }
    },
    handleAlbumClick(album) {
      this.onAlbumClick(album);
    },
  },
});
</script>

<style scoped>
/* ... existing code ... */
</style>